<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryParams"
      :inline="true"
      label-width="88px"
    >
      <el-form-item label="传感器类型">
        <el-select
          v-model="queryParams.type"
          placeholder="传感器类型"
          size="small"
          @clear="cleartype"
          @change="changetype"
          :popper-append-to-body="false"
          style="width: 130px; margin-right: 5px"
        >
          <el-option
            v-for="dicts in types"
            :key="dicts.value"
            :label="dicts.lable"
            :value="dicts.value"
          />
        </el-select>
        <el-select
          v-model="queryParams.ssTransducerCode"
          placeholder="请选择传感器类型"
          size="small"
          @clear="clearsducerCode"
          @change="changes"
          :popper-append-to-body="false"
          :disabled="isTypesducerCode"
        >
          <el-option
            v-for="dicts in typeList"
            :key="dicts.ss_transducer_type"
            :label="dicts.ss_transducer_name"
            :value="dicts.ss_transducer_type"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker
          v-model="queryParams.startTime"
          type="date"
          placeholder="选择日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker
          v-model="queryParams.endTime"
          type="date"
          placeholder="选择日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="gettableList"
          >搜索</el-button
        >
        <el-button
          icon="el-icon-refresh"
          size="mini"
          @click="resetForm('queryParams')"
          >重置</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-download"
          size="mini"
          @click="exportlist"
          >导出</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      :data="tableList"
      :header-cell-style="thaderBack"
    >
      <el-table-column label="序号" width="80">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="ss_transducer_code" label="传感器编号">
      </el-table-column>
      <el-table-column
        prop="ss_transducer_point"
        label="传感器监测地点"
        width="250"
      >
      </el-table-column>

      <!-- <el-table-column prop="inOutType" label="类型">
        <template slot-scope="scope">
          <span>{{ scope.row.inOutType == '1' ? '模拟量' : '开关量' }}</span>
        </template>
      </el-table-column> -->
      <el-table-column prop="ss_transducer_value" label="监测值">
        <!-- <template slot-scope="scope">
          <span>{{
            scope.row.inOutType == '1'
              ? scope.row.ssTransducerValue + '(' + scope.row.company + ')'
              : scope.row.ssTransducerValueName
          }}</span>
        </template> -->
      </el-table-column>
      <el-table-column
        prop="ss_alarm_stime"
        label="报警开始时间"
        width="180"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="ss_alarm_etime"
        label="报警结束时间"
        width="180"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="ss_alarm_duration"
        label="报警时长"
        width="180"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column prop="ss_transducer_state" label="状态">
        <template slot-scope="scope">
          <span>{{
            scope.row.ss_transducer_state == "1"
              ? "正常"
              : scope.row.ss_transducer_state == "2"
              ? "断线"
              : scope.row.ss_transducer_state == "3"
              ? "报警"
              : scope.row.ss_transducer_state == "4"
              ? "负漂"
              : scope.row.ss_transducer_state == "5"
              ? "溢出"
              : scope.row.ss_transducer_state == "6"
              ? "调校"
              : scope.row.ss_transducer_state == "7"
              ? "中断（分站）"
              : scope.row.ss_transducer_state == "8"
              ? "不巡检"
              : scope.row.ss_transducer_state == "9"
              ? "故障"
              : scope.row.ss_transducer_state == "10"
              ? "断电"
              : "其他"
          }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="gettableList"
    />
  </div>
</template>
<script>
import {
  listInfo,
  getInfo,
  exportlist,
  addInfo,
  updateInfo,
  updateInfo1
} from "@/api/security/historicalalarm";
export default {
  data() {
    return {
      activeName: "first",
      tableList: [],
      list: [],
      timer: "",
      timer2: "",
      total: 0,
      loading: false,
      coalmineList: [],
      // pageNum1: 1,
      // pageSize1: 10,
      list2: [],
      csMineCode: "",
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: "",
        ssTransducerCode: "",
        startTime: "",
        endTime: ""
      },
      queryParams2: {
        type: "",
        ssTransducerCode: "",
        startTime: "",
        endTime: ""
      },
      // queryParams2: {
      //   pageNum: 1,
      //   pageSize: 10000,
      //   csMineCode: '',
      //   ssTransducerCode: ''
      // },
      typeList: [],
      types: [
        {
          lable: "模拟量",
          value: "1"
        },
        {
          lable: "开关量",
          value: "2"
        }
      ],
      typevalue: "",
      isTypesducerCode: true
    };
  },
  mounted() {
    this.gettableList();
  },
  methods: {
    handleTime(e) {
      this.queryParams.startTime = this.formatDate(e);
      this.queryParams.endTime = this.formatDate(e);
    },
    formatDate(date) {
      // 设置时间转换格式
      var y = date.getFullYear(); // 获取年
      var m = date.getMonth() + 1; // 获取月
      m = m < 10 ? "0" + m : m; // 判断月是否大于10
      var d = date.getDate(); // 获取日
      d = d < 10 ? "0" + d : d; // 判断日期是否大10
      return y + "-" + m + "-" + d; // 返回时间格式
    },
    handleSizeChange(limit) {
      this.queryParams.pageSize = limit;
      this.gettableList();
    },
    handleCurrentChange(page) {
      this.queryParams.pageNum = page;
      this.gettableList();
    },
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        type: "",
        ssTransducerCode: "",
        startTime: "",
        endTime: ""
      };
      // this.resetlist('queryParams')
    },
    resetForm(form) {
      if (this.$refs[form] !== undefined) {
        this.$refs[form].resetFields();
      }
      this.reset();
      this.gettableList();
    },
    cleartype() {
      this.queryParams.ssTransducerCode = "";
      this.isTypesducerCode = true;
      // this.gettableList()
    },
    clearsducerCode() {
      this.gettableList();
    },
    changetype(e) {
      this.typevalue = e;
      this.queryParams.ssTransducerCode = "";
      this.isTypesducerCode = false;
      this.gettypelist();
      console.log(367, this.typevalue);
    },
    gettypelist() {
      var typevalue = {
        type: this.typevalue
      };
      listInfo(typevalue).then(response => {
        if (response.code === 200) {
          this.typeList = response.data;
        }
      });
    },
    cellStyleFun() {
      return "text-align:center";
    },
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "evencolor";
      } else {
        return "oddcolor";
      }
    },
    changes() {
      this.queryParams.pageNum = "1";
      this.gettableList();
      clearTimeout(this.timer);
      clearTimeout(this.timer2);
    },
    thaderBack() {
      return {
        // background: '#0069eb',
        // color: '#fff',
        // textAlign: 'center',
        fontSize: "0.14rem"
      };
    },
    gettableList() {
      // console.log(98, queryParams)
      // var querys = {
      //   ssTransducerCode: this.queryParams.ssTransducerCode,
      //   inOutType: this.typevalue
      // }
      console.log(98, this.queryParams);
      getInfo(this.queryParams).then(res => {
        console.log(338, res);
        this.loading = false;
        this.tableList = res.data.data;
        this.total = res.data.total;
        // this.tableList = this.list2.slice(0, 8)
        // var index = 0
        // this.timer2 = () => {
        //   index += 8
        //   if (index > this.list2.length) {
        //     index = 0
        //   }
        //   this.tableList = []
        //   this.tableList = this.list2.slice(index, index + 8)
        // }
        // setInterval(this.timer2, 5000)
      });
    },
    exportlist() {
      this.queryParams2.type = this.queryParams.type;
      this.queryParams2.ssTransducerCode = this.queryParams.ssTransducerCode;
      this.queryParams2.startTime = this.queryParams.startTime;
      this.queryParams2.endTime = this.queryParams.endTime;
      console.log(555, this.queryParams2);
      exportlist(this.queryParams2).then((response) => {
          this.downLoadFile(response, '导出')
        })
        .catch((err) => {
          this.$message('导出异常:' + err)
        })
    },
    downLoadFile(fileStream, fileName = 'test') {
      let link = document.createElement('a')
      //type就是blob的type,是MIME类型的，可以自己查看MIME类型都有哪些
      let blogw = new Blob([fileStream], {
        type: 'application/vnd.ms-excel;charset=utf-8'
      })
      let objectUrl = window.URL.createObjectURL(blogw) //创建一个新的url对象
      link.href = objectUrl
      let file_name = decodeURI(`${fileName}列表.xlsx`)
      link.download = file_name //  下载的时候自定义的文件名
      link.style.display = 'none'
      document.body.appendChild(link)
      link.click()
      link.parentNode.removeChild(link)
      window.URL.revokeObjectURL(objectUrl)
    },
  }
};
</script>
<style lang="scss" scoped>
.title {
  line-height: 40px;
  font-size: 16px;
  font-weight: 600;
}
</style>
